<template>
    <div>
        <h1>商品列表</h1>
        <button @click="icebox()">冰箱</button>
        <button @click="tv()">电视</button>
        <ul>
            <li v-for="(item, index) in shower" :key="index"><span>{{ item.name }}</span>&emsp;<span>￥{{
                item.price }}</span>&emsp;<button @click="adder(item.id)">加入购物车(可重复加入)</button></li>
        </ul>
        <h1>购物车</h1>
        全选：<input type="checkbox" @change="aller()" v-model="allis"><br>勾选的总价：<span>{{ suansuan }}</span>
        <ul>
            <li v-for="(item, index) in car" :key="index"><input type="checkbox" v-model="item.is"
                    @change="xuan(item.id)"><span>{{ item.name
                    }}</span>&emsp;<span>￥{{
                        item.price }}</span>&emsp;<button @click="dele(item.id)">删除</button>&emsp;<button
                    @click="jian(item.id)">-</button><span>{{item.num }}</span><button @click="jia(item.id)">+</button></li>

        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            iceboxarr: [
                {
                    name: "冰箱1",
                    price: 100,
                    id: 1
                }, {
                    name: "冰箱2",
                    price: 200,
                    id: 2
                }, {
                    name: "冰箱3",
                    price: 300,
                    id: 3
                },
            ],
            tvarr: [
                {
                    name: "电视1",
                    price: 100,
                    id: 1
                }, {
                    name: "电视2",
                    price: 200,
                    id: 2
                }, {
                    name: "电视3",
                    price: 300,
                    id: 3
                },
            ],
            shower: [
                {
                    name: "冰箱1",
                    price: 100,
                    id: 1
                }, {
                    name: "冰箱2",
                    price: 200,
                    id: 2
                }, {
                    name: "冰箱3",
                    price: 300,
                    id: 3
                },
            ],
            car: [],
            allis: false,
        }
    },
    methods: {
        adder(id) {
            var a = this.shower.findIndex(item => item.id == id)
            if (this.car.every(item => item.name != this.shower[a].name)) {
                this.car.push({
                    name: this.shower[a].name,
                    price: this.shower[a].price,
                    id: this.car.length,
                    num: 1,
                    is: false
                })
            } else {
                this.car.find(item => item.name == this.shower[a].name).num++
            }
        },
        icebox() {
            this.shower = this.iceboxarr
        },
        tv() {
            this.shower = this.tvarr
        },
        dele(id) {
            var a = this.car.findIndex(item => item.id == id)
            this.car.splice(a, 1)
        },
        aller() {
            if (this.allis == true) {
                this.car.forEach(item => item.is = true)
            } else {
                this.car.forEach(item => item.is = false)
            }
        },
        xuan(id) {
            var a = this.car.findIndex(item => item.id == id)
            !this.car[a].is
            if (this.car.every(item => item.is == true)) {
                this.allis = true
            } else {
                this.allis = false
            }
        },
        jian(id) {
            var a = this.car.findIndex(item => item.id == id)
            if (this.car[a].num > 1) {
                this.car[a].num--
            } else {
                alert("商品数量不能少于1")
            }
        },
        jia(id) {
            var a = this.car.findIndex(item => item.id == id)
            this.car[a].num++
        }
    },
    computed: {
        suansuan() {
            var a = 0
            var b = this.car.filter(item => item.is == true)
            b.forEach(item => {
                a += item.price * item.num
            })
            return a
        }
    }
}
</script>